<style>
    body{padding: 10px 30px;}
    .hide{display:none}
</style>
<div class="layui-fluid">
    <div class="layui-row">
        <div class="layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-header">菜单管理</div>
                <div class="layui-card-body">
                    <button class="layui-btn layui-btn-primary up-all">全部收起</button>
                    <button class="layui-btn layui-btn-primary down-all">全部展开</button>
                    <button class="layui-btn layui-btn-primary get-checked">获取选中</button>

                    <table class="layui-table layui-form" id="test-tree-table"></table>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    layui.use(['treetable','form'],function(){
       // var data=[{"id":1,"pid":0,"title":"1-1"},{"id":2,"pid":0,"title":"1-2"},{"id":3,"pid":0,"title":"1-3"},{"id":4,"pid":1,"title":"1-1-1"},{"id":5,"pid":1,"title":"1-1-2"},{"id":6,"pid":2,"title":"1-2-1"},{"id":7,"pid":2,"title":"1-2-3"},{"id":8,"pid":3,"title":"1-3-1"},{"id":9,"pid":3,"title":"1-3-2"},{"id":10,"pid":4,"title":"1-1-1-1"},{"id":11,"pid":4,"title":"1-1-1-2"}];
        var $ = layui.$,
            treetable = layui.treetable;
        var form = layui.form,layer = layui.layer;

        treetable.render({
            elem: '#test-tree-table',
            data:function (){
                axios.get('/api/user/sysMenu/index/'+$.cookie('token')).then(function (response) {
                    if(response.data.code==200){
                        return JSON.parse(response.data.data);
                    }
                }) .catch(function (error) {
                    console.log(error);
                    return "{}";
                })
            },
           // url:"/api/user/sysMenu/index/"+$.cookie('token'),
            field: 'title',
            is_checkbox: true,
            cols: [
                {
                    field: 'title',
                    title: '名称',
                    width: '30%',
                },
                {
                    field: 'router',
                    title: '路由',
                    width: '20%'
                },
                {
                    field: 'icon',
                    title: '图标',
                    width: '20%',
                },
                {
                    title: '状态',
                    width: '20%',
                    template: function(item){
                        return '<input type="checkbox" lay-skin="switch" lay-filter="status" lay-text="开启|关闭">';
                    }
                },
                {
                    field: 'actions',
                    title: '操作',
                    width: '30%',
                    template: function(item){
                        var tem = [];
                        if(item.pid == 0){
                            tem.push('<button class="add-child layui-btn layui-btn-primary" lay-filter="add">添加子级</button>');
                        }
                        tem.push('<button lay-filter="edit" class="layui-btn layui-btn-primary">编辑</button>');
                        if(item.pid > 0){
                            tem.push('<button class="set-attr layui-btn layui-btn-primary">设置属性</button>');
                        }
                        return tem.join(' <font></font> ')
                    },
                },
            ]
        });

        treetable.on('treetable(add)',function(data){
            layer.msg('添加操作');
            console.dir(data);
        })

        treetable.on('treetable(edit)',function(data){
            layer.msg('编辑操作');
            console.dir(data);
        })

        $('.up-all').click(function(){
            treetable.all('up');
        })

        $('.down-all').click(function(){
            treetable.all('down');
        })

        $('.get-checked').click(function(){
            console.dir(treetable.all('checked'));
        })

        form.on('switch(status)',function(data){
            layer.msg('监听状态操作');
            console.dir(data);
        })
    })
</script>